<template>
  <div class="box">
    <ul class="list">
      <li v-for="data,index in datalist.slice((this.page.pageNum-1)*this.page.pageSize,this.page.pageNum*this.page.pageSize)" :key="index">
        <div class="font">{{ data.header }}</div>
        <div class="content">
          <div> {{ data.info }}</div>
          <div> {{ data.time | dateChage}}</div>
        </div>
      </li>
    </ul>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNum"
        :page-size="page.pageSize"
        layout="total, prev, pager, next"
        :total="datalist.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import http from '@/util/http'
export default {
  mounted () {
    this.render()
  },
  data () {
    return {
      sendinfo: {
        token: window.localStorage.getItem('token')
      },
      datalist: [],
      page: {
        pageNum: 1,
        pageSize: 7
      }
    }
  },
  methods: {
    render () {
      http.get('/api/self/show', { params: this.sendinfo }).then(res => {
        if (res.data.code === 1) {
          this.datalist = res.data.info
        }
      })
    },
    handleSizeChange () {

    },
    handleCurrentChange () {

    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  position: relative;
  height: 37.5rem;
  .list{
  list-style: none;
  padding: 1.875rem;
    li{
      line-height: 1.875rem;
      margin: .625rem .625rem;
      .font{
        font-size: 1.25rem;
        color: #00AEEC;
      }
      .content{
          display: flex;
          justify-content: space-between;
        }
    }
  }
  .el-pagination{
    position: absolute;
    bottom: 1.25rem;
    left: 0;
  }

}

</style>
